{include file='public/header'}
<style>
	.checked-li{
		color: red!important;
	}
	.q_section2 .left .a1 .s1{
		font-size: 0.85rem;
	}
</style>
<style>

	/*弹框样式*/
	.imgzoom_pack{
		width:100%;
		height:100%;
		position:fixed;
		left:0;
		top:0;
		background:rgba(0,0,0,.7);
		display:none;
		z-index: 99999999;
	}
	.imgzoom_pack .imgzoom_x{
		color:#fff;
		height:30px;
		width:30px;
		line-height:30px;
		background:#000;
		text-align:center;
		position:absolute;
		right:5px;
		top:5px;
		z-index:9999999;
		cursor:pointer;
	}
	.imgzoom_pack .imgzoom_img{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		overflow:hidden;
	}
	.imgzoom_pack .imgzoom_img img{
		width:100%;
		position:absolute;
		top:50%;
	}
</style>
<body>
<div class="q_section1">
	<div class="container clearfix">
		<div class="a1">
			<a href="javascript:history.back();">
				<img src="__PUBLIC__/home/images/a19.png" alt="">
			</a>
		</div>
		<div class="a2">
			<form action="{:url('Goods/search')}">
				<div class="f1">
					<img src="__PUBLIC__/home/images/a20.png" alt="" class="im1">
					<input type="search" name="keywords" class="input1" >
				</div>
			</form>
		</div>
		<div class="a3">
			<a href="{:url('Notice/index')}">
				<img src="__PUBLIC__/home/images/a21.png" alt="">
				<p class="p1">消息</p>
			</a>
		</div>
	</div>
</div>

<div class="q_section2">
	<div class="container clearfix">
		<div class="left clearfix" style="width: 100%;">
			<div class="a1 chao key1">
				<span class="s1">综合</span>
				<img src="__PUBLIC__/home/images/a22_1.png" alt="">
				<div class="list searchCon">
					<ul>
						<li>
							<a href="javascript:;" data-sort_key="" data-sort_type="">综合排序</a>
						</li>
						<li>
							<a href="javascript:;" data-sort_key="price" data-sort_type="asc">价格由低到高</a>
						</li>
						<li>
							<a href="javascript:;" data-sort_key="price" data-sort_type="desc">价格由高到低</a>
						</li>
						<li>
							<a href="javascript:;" data-sort_key="comment" data-sort_type="desc">好评率</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="a1 chao key2">
				<span class="s1 cate_title">分类</span>
				<img src="__PUBLIC__/home/images/a22_1.png" alt="">
				<div class="list2 searchCate" id="list2" style="overflow-y: scroll">
					{foreach $cate_list as $cate}
					<div class="g1">
						<div class="y1">
							<p class="p1">{$cate.title}</p>
						</div>
						<div class="y2">
							<ul class="clearfix">
								{foreach $cate.children as $cate_c}
								<li>
									<a href="javascript:;" data-cate_id="{$cate_c.id}" data-cate_title="{$cate_c.title}"  {if $cate_id eq $cate_c.id} class="checked-li" data-checked="checked" {/if}>{$cate_c.title}</a>
								</li>
								{/foreach}
							</ul>
						</div>
					</div>
					{/foreach}


				</div>
			</div>
			<div class="a1 chao key1">
				<span class="s1 brand_title">品牌</span>
				<img src="__PUBLIC__/home/images/a22_1.png" alt="">
				<div class="list searchBrand">
					<ul>

						<li>
							<a href="javascript:;" data-brand_id="0" data-brand_title="全部">全部</a>
						</li>
						{foreach $brand_list as $brand}
						<li>
							<a href="javascript:;" data-brand_id="{$brand.id}" data-brand_title="{$brand.title}" {if $brand_id eq $brand.id} class="checked-li" data-checked="checked" {/if}>{$brand.title}</a>
						</li>
						{/foreach}
					</ul>
				</div>
			</div>
		</div>
		<!--<div class="right">-->
			<!--<a href="">-->
				<!--<img src="__PUBLIC__/home/images/a23.png" alt="">-->
			<!--</a>-->
		<!--</div>-->
	</div>
</div>
<div class="q_section3" id="wrapper" style="top: 90px;">
	<ul class="clearfix" id="ulData">
	</ul>
	<!--上拉加载模块-->
	<div id="pullUp">
		<span class="pullUpLabel"></span>
	</div>
	<div id="endData" style="display: none; ">
		<span class="dataEnd">--我是有底线的--</span>
	</div>
	<!--上拉加载模块-->
</div>

<!-- 规格 -->
<div class="guige">
	<div class="guige_1">
		<img src="__PUBLIC__/home/images/a79.png" alt="" class="im1 close_btn">
		<div class="title clearfix">
			<div class="logo big_show">
				<img src="__PUBLIC__/home/images/a14.png" alt="">
			</div>
			<div class="center" style="width: 75%;">
				<p class="p1 chao">高大上家居高大上家居高大上家居高大上家居高大上家居</p>
				<p class="p2">￥69.00</p>
			</div>
		</div>
		<div class="list"  style="max-height: 150px; overflow-y: scroll;">
			<ul class="clearfix good_options">
			</ul>
		</div>
		<div class="last clearfix">
			<p class="p1">数量</p>
			<p class="p2">
				<img src="__PUBLIC__/home/images/a78.png" alt="" class="del_btn">
				<span class="s1 spec_num">1</span>
				<img src="__PUBLIC__/home/images/a77.png" alt="" class="add_btn">
			</p>
		</div>
		<div class="next">
			<a href="javascript:;" class="addCartSpec">确定</a>
		</div>
	</div>
</div>
<section class="imgzoom_pack" style="z-index: 9999999;">
	<div class="imgzoom_x">X</div>
	<div class="imgzoom_img"><img src="" /></div>
</section>
</body>

<script src="__PUBLIC__/home/js/scale.js"></script>
<script>
	document.addEventListener("DOMContentLoaded", function(event){
		ImagesZoom.init({
			"elem": ".big_show"
		});
	}, false);
</script>
<script>
	$(function(){
		//初始化选中分类状态
		let cate_title = $(".searchCate").find(".checked-li").data("cate_title");
		$(".cate_title").text(cate_title);
		//初始化选中品牌状态
		let brand_title = $(".searchBrand").find(".checked-li").data("brand_title");
		$(".brand_title").text(brand_title);

		$(".q_section2 .key1").click(function(){
			$(this).children('.list').slideToggle()
			$(this).siblings().children(".list, .list2").hide();
		})
		$(".q_section2 .key2").click(function(){
			$(this).children('.list2').slideToggle()
			$(this).siblings().children(".list, .list2").hide();
		})

		$("#list2").css("height",($(window).height())-90)
		$("#list2").css("width",($(window).width()))


		$(".searchCon li a").on("click", function () {
			let sort_key = $(this).data("sort_key"), html_text = $(this).text(), sort_type = $(this).data("sort_type");
			$(this).parents(".a1").find("span").html(html_text);
			query.sort_key = sort_key;
			query.sort_type = sort_type;
			p = 1;
			isRefresh=true;
			document.getElementById("ulData").innerHTML = "";
			loadData();
		})

		$(".searchCate li a").on("click", function () {
			let html_text = $(this).data("cate_title"), cate_id = $(this).data("cate_id");
			$(this).parents(".key2").find("span").html(html_text);
			$(".searchCate li a").removeClass("checked-li");
			$(this).addClass("checked-li");
			query.cate_id = cate_id;
			p = 1;
			isRefresh=true;
			document.getElementById("ulData").innerHTML = "";
			loadData();
		})
		$(".searchBrand li a").on("click", function () {
			let html_text = $(this).data("brand_title"), brand_id = $(this).data("brand_id");
			$(this).parents(".key1").find("span").html(html_text);
			$(".searchBrand li a").removeClass("checked-li");
			$(this).addClass("checked-li");
			query.brand_id = brand_id;
			p = 1;
			isRefresh=true;
			document.getElementById("ulData").innerHTML = "";
			loadData();
		})

		$("#ulData").on("click", "li", function (event) {
			event.stopPropagation();
			let good_id = $(this).data("good_id");
			location.href = "{:url('Goods/detail')}?good_id="+good_id
		})

		$(".close_btn").click(function () {
			$(".guige").hide()
		})
		$(".del_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			if(origin_num-1<=0){
				return false;
			}else{
				$(".spec_num").text(origin_num-1);
			}
		});
		$(".add_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			$(".spec_num").text(origin_num+1);
		});
		//加入购物车
		$("#ulData").on("click", ".addCart", function (event) {
			event.stopPropagation();
			let good_id = $(this).data("good_id"), use_spec = $(this).data("spec"), price = $(this).data("price");
			if(use_spec == 0){
				if(isNaN(price)){
					modal.msg("品牌会员才可购买");
					return;
				}
				//直接加入购物车
				$.post("{:url('Cart/addCart')}", {good_id:good_id, spec_id:0}, function (res) {
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					modal.msg(res.result_info);
					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
				});
			}else{
				//拉取规格信息
				$.post("{:url('Goods/getOptions')}", {good_id:good_id}, function (res) {
					if(res.result_code == 0){
						let good = res.result_data.good, options=res.result_data.options;
						$(".guige_1 .title .logo img").attr("src", good.good_img_url);
						$(".guige_1 .title .center .p1").html(good.good_title);
						$(".guige_1 .title .center .p2").html("￥"+good.good_price);
						let _li = "";
						$.each(options, function (i,v) {
							_li += '<li><span class="s1" data-spec_id="'+v.spec_id+'" data-good_id="'+v.good_id+'" data-spec_img="'+v.img_url+'" data-spec_price="'+v.spec_price+'" data-spec_title="'+v.spec_title+'">'+v.spec_title+'</span></li>'
						});
						$(".good_options").html(_li);
						$(".last .spec_num").html(1);
						$(".guige").show();
					}else{
						modal.msg(res.result_info);
					}
				});
			}
		})

		//选中规格更改购买信息
		$(".good_options").on("click", "li span", function () {
			let data = $(this).data();
			$(".guige_1 .title .logo img").attr("src", data.spec_img);
			$(".guige_1 .title .center .p1").html(data.spec_title);
			$(".guige_1 .title .center .p2").html("￥"+data.spec_price);
			$(this).parent().siblings().find("span").removeClass("select");
			$(this).addClass("select");
		})

		//规格加入购物车
		$(".addCartSpec").on("click", function () {
			let data = $(".good_options").find(".select").data();
			console.log(data);
			if(typeof data == "undefined"){
				modal.msg("你还未选择规格");
				return ;
			}
			if(isNaN(data.spec_price)){
				modal.msg("品牌会员才可购买");
				return;
			}else{
				//直接加入购物车
				let spec_num = parseInt($(".spec_num").text());
				$.post("{:url('Cart/addCart')}", {good_id:data.good_id, spec_id:data.spec_id, num:spec_num}, function (res) {
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
					modal.msg(res.result_info);
				});
			}
		})

	})

	var query = {
		sort_key:"",
		sort_type:"",
		brand_id:"{$brand_id}",
		cate_id:"{$cate_id}",
		keywords:"{$keywords}",
		presell_id:"{$presell_id}"
	};
	var mScroll;
	var isRefresh = true;
	var p = 1; //当前页码
	var onePageCount = 20; //每页显示多少个
	var end=false;
	window.onload = function() {
		mScroll = PullDownAddUP("wrapper", function(loadType) {
			if (loadType == "refresh") { //下拉刷新
				isRefresh = true;
			} else { //上拉加载
				isRefresh = false;
				if(end){
					return true;
				}
			}
			loadData();
		});
		loadData();
	}
	function loadData() {
		if (isRefresh) {
			p = 1;
			$("#pullUp").show();
			$("#endData").hide();
			end = false;
			document.getElementById("ulData").innerHTML = "";
		} else {
			p++;
		}
		let index = modal.loading();
		//加载渲染数据
		query.page=p;
		query.pageNum = onePageCount;
		$.post(location.href, query, function (res) {
			modal.close(index);
			if(res.result_code == 0){
				let data = res.result_data;
				let _li = "";
				if(data.length<onePageCount){
					$("#pullUp").hide();
					$("#endData").show();
					end = true;
				}
				$.each(data, function (i,v) {
					_li += '<li class="clearfix" data-good_id="'+v.id+'">' +
							'	<div class="logo">' +
							'		<a href="javascript:;"><img src="'+v.img_url+'" alt=""></a>' +
							'	</div>' +
							'	<div class="center">' +
							'		<a href="javascript:;">' +
							'			<p class="p1 chao">'+v.title+'</p>' +
							'			<p class="p2"><span class="s1">'+v.brand_title+'</span></p>' +
							'		</a>' +
							'		<p class="p3 clearfix">' +
							'			<span class="s1">'+v.price+'</span>' +
							'			<a href="javascript:;" class="addCart" data-good_id="'+v.id+'" data-spec="'+v.use_spec+'" data-price="'+v.price+'">' +
							'				<img src="__PUBLIC__/home/images/a25.png" alt="">' +
							'			</a>' +
							'		</p>' +
							'	</div>' +
							'</li>';
				});
				$("#ulData").append(_li);
				mScroll.refresh();
			}else{
				// mScroll.destroy();
				end = true;
				modal.msg(res.result_info);
			}
		});
	}
</script>
</html>